/**
 *  Created by clz on
 *  Function:
 *  Desc:
 */
import React, {Component} from 'react';
import {StyleSheet, ScrollView, Text, View,TouchableOpacity} from 'react-native';
import Screen from '../utiles/Screen'
import px2dp from "../../px2dp";

export default class ScrollableTab extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style={styles.container}>
                {this._renderTabView()}
                <ScrollView style={styles.scrollStyle} horizontal={true} pagingEnabled={true}>
                    {['页面一', '页面二', '页面三'].map((item, index) => {
                        return (
                            <Text key={index} style={{width: Screen.width, flex: 1}}>{item}</Text>
                        );
                    })}

                </ScrollView>
            </View>
        )
    }

    // _renderTabView() {
    //     return (
    //         <View
    //             style={styles.tabContainer}
    //         >
    //             {['页面一', '页面二', '页面三'].map((item, index) => {
    //                 return (
    //                     <TouchableOpacity
    //                         key={item + index}
    //                         style={styles.tabStyle}
    //                     >
    //                         <Text>{item}</Text>
    //                     </TouchableOpacity>
    //                 );
    //             })}
    //         </View>
    //     );
    // }
    _renderTabView(){
        
    }
}

const styles = StyleSheet.create({
    container: {
        width: Screen.width,
        flex: 1,
        marginTop: px2dp(22)
    },
    scrollStyle: {
        flex: 1
    },
    tabContainer: {
        width: Screen.width,
        flexDirection: 'row',
        alignItems: 'center',
        height: 50,
    },
    tabStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});
